<template>
    <div class="detailpage" ref="box">
        <div v-if="loading"><LoadingImg /></div>
        <div v-else>
            <header id="a">
                <div @click="go" class="left"><van-icon name="arrow-left" /></div>
                <div class="title">{{ list.title }}</div>
            </header>
            <div class="box">
                <div class="img" v-if="list.horizontal_cover">
                    <div class="img_content">
                        <span class="name">{{ list.title }}</span>
                        <span class="author" v-if="list.author_name">{{ list.author_name | author }}</span>
                    </div>
                    <img :src="list.horizontal_cover" alt="" />
                </div>

                <div class="but" v-if="list.horizontal_cover">
                    <div class="collect">
                        <img src="@/assets/collect.png" alt="" /><span @click="join" v-if="isCollect == false">追漫</span
                        ><span @click="join" v-if="isCollect == true" :class="isCollect ? 'active' : ''">已追漫</span>
                    </div>
                    <div class="right">
                        <button @click="tiao(first)">{{ first_title }}</button>
                    </div>
                </div>
                <div class="finish" v-if="list.evaluate">{{ list.is_finish | state }}</div>
                <div @click="changeSta" class="details" v-if="list.evaluate">
                    <span :class="is ? 'over' : 'ov'">{{ list.evaluate }} <van-icon v-if="is" @click="changeSta" class="icon" name="arrow-down" /></span>
                </div>
                <div class="section">
                    <span class="allsection" v-if="list.total">全部章节({{ list.total }})</span>
                    <div class="section_box" v-if="list.total">
                        <ul v-if="show == true">
                            <li @click="cartoon(i.id)" v-for="(i, ind) in shortArr" :key="ind">
                                <a v-if="i.short_title">{{ i.short_title }}</a>
                            </li>
                            <li @click="isDisplay">...</li>
                        </ul>
                        <ul v-if="show == false">
                            <li @click="cartoon(i.id)" v-for="(i, ind) in arr" :key="ind">
                                <a v-if="i.short_title">{{ i.short_title }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-if="num" class="hot_topic">
                    <div>热门评论({{ num | hotreply }})</div>
                    <div class="hot_box">
                        <ul>
                            <li v-for="(i, ind) in replys" :key="ind" class="hot_item">
                                <div class="hot_item_top">
                                    <img :src="i.url" />
                                    <span>{{ i.name }}</span>
                                </div>
                                <div class="hot_item_bottom">{{ i.reply }}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="favorite">
                    <span v-if="list.total">猜你喜欢</span>
                    <div class="favorite_box">
                        <div @click="changeID(i.season_id)" v-for="(i, ind) in favorites" :key="ind" class="favorite_item">
                            <a href="#a">
                                <div class="fimg"><img :src="i.vertical_cover" alt="" /></div>
                                <div class="content">
                                    <span class="fav_title">{{ i.title }}</span
                                    ><span class="fav_state">{{ i.is_finish == 1 ? "[完结]" : "" }} {{ i.is_finish == 1 ? "共" + i.last_ord + "话" : "更新至" + i.last_ord + "话" }}</span>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import LoadingImg from "@/components/LoadingImg.vue";
import { myReply } from "@/request/index.js";
import { myFavorite } from "@/request/index.js";
export default {
    components: {
        LoadingImg,
    },
    data() {
        return {
            //是否收藏
            isCollect: false,
            //章节
            show: true,
            list: [],
            //介绍
            is: true,
            arr: [],
            shortArr: [],
            //热门评论
            reply: [],
            num: "",
            //个人评论
            replys: [],
            favorites: [],
            first: "",
            first_title: "",
            loading: true,
        };
    },
    methods: {
        tiao(x) {
            this.getHistory();
            this.$router.push({ path: "/cartooncontent/" + x, query: { detail: this.$route.params.id, name: this.list.title, id: x, arr: JSON.stringify(this.list.ep_list) } });
        },
        //历史记录
        getHistory() {
            let user = localStorage.getItem("token");
            if (user == null) {
                return;
            }
            if (localStorage.getItem(user + "history") == null) {
                let arr = [];
                arr.push({ bookid: this.$route.params.id, img: this.list.vertical_cover, bookname: this.list.title });
                localStorage.setItem(user + "history", JSON.stringify(arr));
            } else {
                let newArr = JSON.parse(localStorage.getItem(user + "history"));
                for (var i = 0; i < newArr.length; i++) {
                    if (newArr[i].bookid == this.$route.params.id) {
                        return;
                    }
                }
                newArr.push({ bookid: this.$route.params.id, img: this.list.vertical_cover, bookname: this.list.title });
                localStorage.setItem(user + "history", JSON.stringify(newArr));
            }
        },
        //多用户区分,本地储存书架
        join() {
            this.isCollect = !this.isCollect;
            let token = localStorage.getItem("token");
            if (token == null) {
                return;
            }
            let img = this.list.vertical_cover;
            let bookId = this.$route.params.id;
            //为空时
            if (this.isCollect) {
                if (JSON.parse(localStorage.getItem(token)) == null || JSON.parse(localStorage.getItem("key")) == true) {
                    let empty = [];
                    empty.push({
                        bookimg: img,
                        bookId: bookId,
                        isCollect: this.isCollect,
                        bookname: this.list.title,
                        name: this.list.title,
                        arr: JSON.stringify(this.list.ep_list),
                        id: this.list.ep_list[0].id,
                        finish: this.list.is_finish,
                        last: this.list.last_ord,
                    });
                    localStorage.setItem(token, JSON.stringify(empty));
                } else {
                    let newAll = JSON.parse(localStorage.getItem(token));
                    for (let i = 0; i < newAll.length; i++) {
                        if (newAll[i].bookId == bookId) {
                            return;
                        }
                    }
                    newAll.push({
                        bookimg: img,
                        bookId: bookId,
                        isCollect: this.isCollect,
                        bookname: this.list.title,
                        name: this.list.title,
                        arr: JSON.stringify(this.list.ep_list),
                        id: this.list.ep_list[0].id,
                        finish: this.list.is_finish,
                        last: this.list.last_ord,
                    });
                    localStorage.setItem(token, JSON.stringify(newAll));
                }
            } else {
                let newArr = JSON.parse(localStorage.getItem(token));
                if (newArr == null) {
                    return;
                }
                for (let i = 0; i < newArr.length; i++) {
                    if (newArr[i].bookId == bookId) {
                        newArr.splice(i, 1);
                        localStorage.setItem(token, JSON.stringify(newArr));
                    }
                }
            }
        },

        cartoon(x) {
            this.getHistory();
            // console.log(x, this.$route.params.id, this.list.title, x, JSON.stringify(this.list.ep_list));
            this.$router.push({ path: "/cartooncontent/" + x, query: { detail: this.$route.params.id, name: this.list.title, id: x, arr: JSON.stringify(this.list.ep_list) } });
        },
        changeID(x) {
            this.loading = true;
            this.$router.push({ name: "detailpage", params: { id: x } });
            this.getReply(x);
            this.getFavorite(x);
            this.getDetail();
        },
        isDisplay() {
            this.show = false;
        },
        go() {
            this.$router.push({ path: "/" });
        },
        getDetail() {
            let id = this.$route.params.id;
            this.$axios("https://apis.netstart.cn/mbcomic/ComicDetail?comic_id=" + id).then((data) => {
                this.shortArr = [];
                let datas = data.data.data.ep_list;
                this.list = data.data.data;
                this.arr = datas.reverse();
                for (let i = 0; i < 7; i++) {
                    this.shortArr.push(this.arr[i]);
                }
                this.first_title = this.list.ep_list[0].short_title;
                this.first = this.list.ep_list[0].id;
                this.loading = false;
                //收藏判断
                let token = localStorage.getItem("token");
                if (token == null) {
                    return;
                }
                let box = JSON.parse(localStorage.getItem(token));
                if (box == null) {
                    return;
                }
                console.log(box);
                for (let i = 0; i < box.length; i++) {
                    if (box[i].bookId == id) {
                        this.isCollect = true;
                        return;
                    } else {
                        this.isCollect = false;
                    }
                }
            });
        },
        changeSta() {
            this.is = false;
        },
        getReply(x) {
            myReply({ oid: x }).then((data) => {
                if (data.code == 0) {
                    this.reply = data.data;
                    this.num = data.data.page.acount;
                    let arr = [];
                    for (let i = 0; i < data.data.replies.length; i++) {
                        arr.push({
                            name: this.reply.replies[i].member.uname,
                            url: this.reply.replies[i].member.avatar,
                            reply: this.reply.replies[i].content.message,
                            mid: this.reply.replies[i].member.mid,
                        });
                    }
                    this.replys = arr.map((data) => {
                        return data;
                    });
                }
            });
        },
        getFavorite(x) {
            myFavorite({ comic_id: x }).then((data) => {
                this.favorites = data.data;
            });
        },
    },
    mounted() {
        this.getReply(this.$route.params.id);
        this.getFavorite(this.$route.params.id);
        this.getDetail();
    },
    filters: {
        hotreply(x) {
            if (x >= 10000) {
                return (x / 10000).toFixed(2) + "万";
            }
            return x;
        },
        author(x) {
            let str = "";
            for (let i = 0; i < x.length; i++) {
                str += x[i] + " ";
            }
            return str;
        },
        state(x) {
            if (x == 0) {
                return "连载中";
            }
            return "已完结";
        },
    },
    watch: {
        $router(to, from) {
            console.log(to, from);
            console.log(1);
        },
    },
    // beforeRouteUpdate(to, from, next) {
    //     if (to != from) {
    //         this.getDetail();
    //         this.getReply(this.$route.params.id);
    //         this.getFavorite(this.$route.params.id);
    //         next();
    //     } else {
    //         next(false);
    //     }
    // },
};
</script>

<style lang="scss" scoped>
.detailpage {
    overflow: scroll;
    header {
        width: 100%;
        height: 2.875rem;
        position: relative;
        box-sizing: border-box;
        .left {
            position: absolute;
            left: 0.5rem;
            top: 50%;
            transform: translateY(-50%);
            img {
                width: 1.125rem;
                height: 1.125rem;
            }
        }
        .title {
            box-sizing: border-box;
            padding: 0 3.75rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            height: 2.875rem;
            text-align: center;
            line-height: 2.875rem;
            font-size: 1rem;
        }
    }
    .box {
        width: 100%;
        .img {
            height: 13.125rem;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .img_content {
            position: absolute;
            height: 3.125rem;
            bottom: 0.625rem;
            left: 0.9375rem;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
        }
        .name {
            font-size: 1.125rem;
            color: white;
        }
        .author {
            font-size: 0.8125rem;
            color: #d6d4d4;
        }
        .but {
            margin-top: 0.9375rem;
            display: flex;
            justify-content: space-between;
            padding: 0 0.9375rem;
            .collect {
                display: flex;
                align-items: center;
                // font-size: 1.0625rem;
                span.active {
                    color: #e56e60;
                }
                img {
                    width: 30px;
                    height: 1.875rem;
                }
            }
            .right {
                button {
                    border: none;
                    color: white;
                    background: linear-gradient(8deg, #ffb1a8, #f04a38);
                    border-radius: 1rem;
                    padding: 0.625rem 90px;
                    font-size: 0.875rem;
                }
            }
        }
        .details {
            margin-top: 0.5rem;
            span {
                font-size: 0.75rem;
                display: block;
                padding: 0 1.125rem;
                color: #999;
                height: 2.125rem;
                line-height: 1rem;
            }
            span.ov {
                height: auto;
            }
            span.over {
                position: relative;
                overflow: hidden;
                display: -webkit-box;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            .icon {
                position: absolute;
                right: 1.3125rem;
                bottom: 0.0625rem;
                font-size: 16px;
            }
        }
        .finish {
            padding: 0 1.125rem;
            margin: 0.875rem 0 0.3125rem 0;
        }
        .section {
            margin-top: 1.375rem;
            padding: 0 1.125rem;
            .section_box {
                margin-top: 0.625rem;
                ul {
                    display: flex;
                    flex-wrap: wrap;
                    font-size: 0.75rem;
                }
                li:nth-child(4n + 4) {
                    margin: 0 0 0.4375rem 0;
                }
                li {
                    margin: 0 0.375rem 0.4375rem 0;
                    display: inline-block;
                    box-sizing: border-box;
                    border: 1px solid #cccccc;
                    width: 5rem;
                    height: 2.375rem;
                    line-height: 2.375rem;
                    text-align: center;
                    color: #5a5a5a;
                }
            }
        }
        .hot_topic {
            padding: 0 1.125rem;
            margin-top: 0.625rem;
            .hot_box {
                margin-top: 0.9375rem;
                width: 100%;
                overflow-x: scroll;
            }
            ul {
                width: 62.5rem;
                height: 7.1875rem;
                display: flex;
            }
            .hot_item {
                box-sizing: border-box;
                border: 1px solid #cccccc;
                width: 15.625rem;
                height: 7.1875rem;
                margin-right: 0.625rem;
                padding: 0.5rem 0.625rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                &:last-child {
                    margin-right: 0;
                }
                .hot_item_top {
                    width: 14.25rem;
                    height: 2.5rem;
                    display: flex;
                    align-items: center;
                    color: #a4a4a4;
                    font-size: 0.8125rem;
                    box-sizing: border-box;
                    img {
                        border-radius: 50%;
                        width: 2.5rem;
                        height: 2.5rem;
                        margin-right: 0.3125rem;
                    }
                }
                .hot_item_bottom {
                    font-size: 0.75rem;
                    height: 2.9688rem;
                    line-height: 1.3;
                    overflow: hidden;
                    display: -webkit-box;
                    text-overflow: ellipsis;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                }
            }
        }
        .favorite {
            padding: 0 1.125rem;
            margin-top: 1.25rem;
            .favorite_box {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
            .favorite_item {
                margin-top: 0.625rem;
                width: 6.5625rem;
                .fimg {
                    width: 6.5625rem;
                    height: 7.8125rem;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .content {
                    height: 2.5rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-evenly;
                }
                .fav_title {
                    color: black;
                    font-size: 0.8125rem;
                    width: 100%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .fav_state {
                    font-size: 0.75rem;
                    color: #999999;
                }
            }
        }
    }
}
</style>
